<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1300" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false" :close-on-press-escape="mode != 'show' ? false : true">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" label-width="130" ref="dialogForm">
            <el-row :gutter="1">
                <el-col :xs="24" :sm="6">
					<el-form-item label="供应商" prop="apply_id">
						<el-select v-model="form.apply_id" placeholder="请选择" filterable @change="applyChange(form.apply_id)" size="large">
							<el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
                <el-col :xs="24" :sm="6">
					<el-form-item label="下单日期" prop="date">
						<el-date-picker v-model="form.date" type="date" placeholder="请选择日期" :value-format="'YYYY-MM-DD'" style="width:100%" size="large"/>
					</el-form-item>
				</el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="订单编号" prop="purchase_code">
                        <el-input v-model="form.purchase_code" placeholder="请输入订单编号" clearable size="large"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="需方" prop="buyer_id">
                        <el-input v-model="buyer_name" placeholder="请选择需方" readonly @click="checkBuyer" size="large"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :xs="24" :sm="6">
                    <el-form-item label="联系人" prop="linkman">
						<el-input v-model="applyInfo.linkman" placeholder="联系人" readonly size="large"></el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="联系方式" prop="mobile">
						<el-input v-model="applyInfo.mobile" placeholder="联系方式" readonly size="large"></el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="品名" prop="goods_id">
						<el-input v-model="goods_name" placeholder="品名" readonly @click="checkShop" size="large"></el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="订单类型" prop="plan_type">
                        <el-select v-model="form.plan_type" placeholder="请选择" filterable size="large">
							<el-option label="白坯" :value="1"></el-option>
							<el-option label="半成品" :value="2"></el-option>
							<el-option label="成品" :value="3"></el-option>
						</el-select>
					</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="供应地址" prop="address">
						<el-input v-model="applyInfo.address" placeholder="供应地址" readonly size="large"></el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="克重" prop="weight">
						<el-input v-model="form.weight" placeholder="克重" clearable size="large" type="number" @mousewheel.prevent>
                            <template #append>克/米</template>
                        </el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="单价" prop="price">
						<el-input v-model="form.price" placeholder="单价" clearable size="large" type="number" @mousewheel.prevent>
                            <template #append>元/米</template>
                        </el-input>
					</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" placeholder="备注" clearable size="large"></el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="数量" prop="plan_num">
						<el-input v-model="form.plan_num" placeholder="数量" clearable size="large" type="number" @mousewheel.prevent>
                            <template #append>匹</template>
                        </el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="批号" prop="batch_num">
						<el-input v-model="form.batch_num" placeholder="批号" clearable size="large"></el-input>
					</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :xs="24" :sm="6">
                    <el-form-item label="经密" prop="jm">
						<el-input v-model="form.jm" placeholder="经密" clearable size="large"></el-input>
					</el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                    <el-form-item label="纬密" prop="wm">
						<el-input v-model="form.wm" placeholder="纬密" clearable size="large"></el-input>
					</el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit(0)">保 存</el-button>
        </template>
        <shop-apply v-if="dialog.shop" ref="shopDialog" @success="shopBack" @closed="dialog.shop = false" :query="{apply_id: form.apply_id}"></shop-apply>
        <buyer-list v-if="dialog.buy" ref="buyDialog" @success="buyBack" @closed="dialog.buy = false"></buyer-list>
    </el-dialog>
</template>

<script>
import shopApply from '@/views/basic/apply/shopApply.vue';
import BuyerList from '@/views/basic/buyer/buyerList.vue';

export default {
    components: { 
        shopApply,
        BuyerList,
    },
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增采购计划',
                edit: '编辑采购计划',
                show: '查看采购计划',
            },
            visible: false,
            isSaveing: false,
            form: {
                id: "",
                apply_id: "",
                date: this.moment().format('YYYY-MM-DD'),
                purchase_code: "",
                goods_id: "",
                plan_type: "",
                weight: "",
                price: "",
                remark: "",
                plan_num: "",
                batch_num: "",
                jm: "",
                wm: "",
                
                buyer_id: "",
            },
            rules: {
                apply_id: [{required: true, message: '请选择供应商'}],
                goods_id: [{required: true, message: '请选择品名'}],
                plan_type: [{required: true, message: '请选择订单类型'}],
                buyer_id: [{required: true, message: '请选择需方'}],
            },
            dialog: {
                shop: false,
                buy: false,
            },
            goods_name: "",
            applyList: [],
            applyInfo: {
                linkman: "",
                mobile: "",
                address: "",
                apply_name: "",
            },
            buyer_name: "",
            apply_pinyin: "",
        }
    },
    mounted() {
		this.getApply();
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit(e) {
            this.form.is_check = e
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    var res = [];
                    if (this.form.id) {
                        res = await this.$API.business.purchase.plan.edit.post(this.form);
                    } else {
                        res = await this.$API.business.purchase.plan.add.post(this.form);
                    }
                    this.isSaveing = false;
                    if (res.code == 1) {
                        this.visible = false;
                        this.$emit('success', this.form, this.mode)
                        this.$message.success("操作成功")
                    } else {
                        this.$alert(res.message, "提示", {type: 'error'})
                    }
                }
            })
        },
        //表单注入数据
        async setData(data) {
            this.form.id = data.id
            var res = await this.$API.business.purchase.plan.detail.get({id: data.id});
            this.form.apply_id = res.data.apply_id
            this.form.date = res.data.date
            this.form.purchase_code = res.data.purchase_code
            this.form.goods_id = res.data.goods_id
            this.goods_name = res.data.goods && res.data.goods.name
            this.form.plan_type = res.data.plan_type
            this.form.weight = res.data.weight
            this.form.price = res.data.price
            this.form.remark = res.data.remark
            this.form.plan_num = res.data.plan_num
            this.form.batch_num = res.data.batch_num
            this.form.jm = res.data.jm
            this.form.wm = res.data.wm
            this.form.buyer_id = res.data.buyer_id
            this.buyer_name = data.buyer?.buyer_name
            setTimeout(() => {
                this.applyChange(res.data.apply_id)
            }, 100)
        },
        // 选择商品
        checkShop(){
            if(!this.form.apply_id) return this.$message.error('请选择供应商')
            let row = {
                apply_id: this.form.apply_id,
                apply_name: this.applyInfo.apply_name
            }
            this.dialog.shop = true
            this.$nextTick(() => {
                this.$refs.shopDialog.open('add').setData(row,'select')
            })
        },
        // 选择商品返回
        shopBack(data){
            this.form.goods_id = data.goods_id
            this.goods_name = data.goods_name
            this.form.batch_num = `${this.apply_pinyin}${data.goods_code}${this.moment().format('YYYYMMDD')}`
        },
        // 供应商列表
		async getApply() {
			var res = await this.$API.basic.apply.all.get({type: 1});
			this.applyList = res.data
		},
        async applyChange(e){
            let apply = this.applyList.find(item => item.apply_id == e)
            this.applyInfo.linkman = apply.linkman
            this.applyInfo.mobile = apply.mobile
            this.applyInfo.address = apply.address
            this.applyInfo.apply_name = apply.apply_name
            var res = await this.$API.common.getPinyin.get({ val: apply.apply_name });
            this.apply_pinyin = res.data.py_code
        },
        // 选择需方
        checkBuyer(){
            this.dialog.buy = true
            this.$nextTick(() => {
                this.$refs.buyDialog.open('add').setData(1)
            })
        },
        // 需方返回
        buyBack(data){
            this.form.buyer_id = data.id
            this.buyer_name = data.buyer_name
        },
    }
}
</script>

<style >
.el-input-group__append{
    color: #098;
}
</style>
